<template>
  <div>
    <TypeNav />
    <ListContainer />
    <Recommend />
    <Rank />
    <Like />
    <!-- 楼层的数据是在Home这个组件中，而楼层的渲染是在Floor组件中，所以我们应该利用FloorList对Floor组件进行循环 -->
    <!-- // ? 组件的通讯方式有哪些分类？ 父子、子父、非父子、祖孙。 组件的通讯方式有哪些？ -->
    <!-- 父传递属性到子组件 -->
    <Floor v-for="item in floorList" :key="item.id" :floor="item" />
    <Brand />
  </div>
</template>
<script>
import ListContainer from "./ListContainer";
import Recommend from "./Recommend";
import Rank from "./Rank";
import Brand from "./Brand";
import Like from "./Like";
import Floor from "./Floor";
import { mapState } from "vuex";
export default {
  name: "Home",
  components: {
    ListContainer,
    Recommend,
    Rank,
    Like,
    Brand,
    Floor,
  },
  computed: {
    ...mapState({
      floorList: (state) => state.home.floorList,
    }),
  },
  methods: {
    getFloorList() {
      // mock数据的请求在network中看不到有请求的地址
      // mockjs实现的是拦截ajax请求，返回mock数据
      this.$store.dispatch("getFloorList");
    },
  },
  mounted() {
    this.getFloorList();
  },
};
</script>
